﻿@model GolfLeague.EditModels.CourseScoreCardEditModel

<script type="text/javascript">
    $(document).ready(function () {
        $('#dialogTeeBox').dialog({
            autoOpen: false,
            model: true
        });
        $('input:button').button({ icons: { primary: 'ui-icon-pencil' }, text: false });
        $('button').button({ icons: { primary: 'ui-icon-trash' }, text: false });
        $('input:submit').button();
        $('input:reset').button();
        $('div.buttonlist a').hover(
		    function () { $(this).addClass('ui-state-hover'); },
		    function () { $(this).removeClass('ui-state-hover'); }
	    );
    });

    $(function () {
        $(".EditTeeBoxButton").click(function (e) {
            e.preventDefault();
            var recordToEdit = $(this).attr("id");
            recordToEdit = recordToEdit.replace("edit-", "");

            if (recordToEdit != '') {
                window.location = '../TeeBoxEdit/' + recordToEdit;
            }
        });
    });

    $(function () {
        $(".EditHoleButton").click(function (e) {
            e.preventDefault();
            var recordToEdit = $(this).attr("id");
            recordToEdit = recordToEdit.replace("edit-", "");

            if (recordToEdit != '') {
                window.location = '../HoleEdit/' + recordToEdit;
            }
        });
    });

    $(function () {
        $(".TeeBoxDropdown").change(function () {
            var teeBoxID = $(this).val();
            var holeID = $('#NewHole_HoleID').val();

            if (teeBoxID != '' && holeID != '') {
                $.ajax({
                    url: '../HoleDetails',
                    type: 'POST',
                    dataType: 'json',
                    data: "{ holeID : '" + holeID + "', teeBoxID : '" + teeBoxID + "'}",
                    contentType: 'application/json; charset=utf-8',
                    success: function (data) {
                        document.getElementById("NewHoleDetails_Yardage").value = data.holeDetails.Yardage;
                        document.getElementById("NewHoleDetails_Par").value = data.holeDetails.Par;
                    }
                });
            }
        });
    });

    $(function () {
        $(".DeleteTeeBoxButton").click(function (e) {
            e.preventDefault();
            var recordToDelete = $(this).attr("id");
            recordToDelete = recordToDelete.replace("delete-", "");
            $("#dialogTeeBox").dialog("option", "buttons", {
                "Yes": function () {
                    $(this).dialog("close");
                    if (recordToDelete != '') {
                        $.post("../TeeBoxDelete", { "id": recordToDelete },
                        function (data) {
                            $('#row-FrontTeeBox-' + recordToDelete).fadeOut('slow');
                            $('#row-BackTeeBox-' + recordToDelete).fadeOut('slow');
                        });
                    }
                },
                "No": function () {
                    $(this).dialog("close");
                    return false;
                }
            });
            $("#dialogTeeBox").dialog("open");
        });
    });

    $(function () {
        $(".DeleteButton").click(function (e) {
            e.preventDefault();
            var recordToDelete = $(this).attr("id");
            recordToDelete = recordToDelete.replace("delete-", "");

            $("#dialog").dialog("option", "buttons", {
                "Yes": function () {
                    $(this).dialog("close");
                    if (recordToDelete != '') {
                        $.post("../CourseDelete", { "courseID": recordToDelete },
                        function (data) {
                            $('#row-' + recordToDelete).fadeOut('slow');
                        });
                    }
                },
                "No": function () {
                    $(this).dialog("close");
                    return false;
                }
            });
            $("#dialog").dialog("open");
        });
    });
    
    $(function () {
        $(".CancelEditButton").click(function (e) {
            e.preventDefault();
            var courseID = $(this).attr("id");
            courseID = courseID.replace("cancel-", "");

            if (courseID != '') {
                window.location = "../ScoreCard/" + courseID;
            }
        });
    });

</script>

@{
    ViewBag.Title = "ScoreCard";
}
@Html.ActionLink("Admin Home", "Admin", "Home") > @Html.ActionLink("Courses", "Index") > Scorecard
<h2>Scorecard for @Model.CourseName</h2>

<table class="formTable" width="50%">
    <tr>
        <td class="formTable">
@using (Html.BeginForm((Model.NewTeeBox.TeeBoxID > 0 ? "TeeBoxEdit" : "TeeBoxAdd"), "Course")) {
    <fieldset>
        <legend>TeeBox</legend>

        @Html.HiddenFor(model => model.NewTeeBox.CourseID)
        @Html.HiddenFor(model => model.NewTeeBox.TeeBoxID)

        <div class="editor-label">
            @Html.LabelFor(model => model.NewTeeBox.TeeBoxName)
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.NewTeeBox.TeeBoxName, new SelectList(new string[] {"Black", "Blue", "Gold", "Magenta", "Orange", "Red", "Teal", "White", "Yellow"}))
            @Html.ValidationMessageFor(model => model.NewTeeBox.TeeBoxName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.NewTeeBox.Rating)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.NewTeeBox.Rating)
            @Html.ValidationMessageFor(model => model.NewTeeBox.Rating)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.NewTeeBox.Slope)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.NewTeeBox.Slope)
            @Html.ValidationMessageFor(model => model.NewTeeBox.Slope)
        </div>

        <p>
            @if (Model.NewTeeBox.TeeBoxName == null)
            {
                <input type="submit" value="Add" />
            }
            else
            {
                <input type="submit" value="Save" />
                <input type="reset" class="CancelEditButton" value="Cancel" id="cancel-@Model.NewTeeBox.CourseID" />
            }
        </p>
        <div id="dialogTeeBox" title="Confirm Delete">Are you sure you want to delete this teebox and all of its information?</div>
    </fieldset>
}
        </td>
        <td class="formTable">
@using (Html.BeginForm((Model.NewTeeBox.TeeBoxID > 0 ? "HoleEdit" : "HoleAdd"), "Course")) {
    <fieldset>
        <legend>Hole Information</legend>
        @Html.HiddenFor(model => model.NewHole.HoleID)
        @Html.HiddenFor(model => model.NewHole.CourseID)
        @Html.HiddenFor(model => model.NewHoleDetails.HoleID)
        @Html.HiddenFor(model => model.NewHoleDetails.HoleDetailID)

        <div class="editor-label">
            @Html.LabelFor(model => model.NewTeeBox.TeeBoxName)
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.NewHoleDetails.TeeBoxID, new SelectList(Model.TeeBoxDropDown, "dropdownID", "dropdownText", Model.NewHoleDetails.TeeBoxID), new { @class = "TeeBoxDropdown" })
            @Html.ValidationMessageFor(model => model.NewHoleDetails.TeeBoxID)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.NewHole.HoleNumber)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.NewHole.HoleNumber)
            @Html.ValidationMessageFor(model => model.NewHole.HoleNumber)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.NewHoleDetails.Yardage)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.NewHoleDetails.Yardage)
            @Html.ValidationMessageFor(model => model.NewHoleDetails.Yardage)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.NewHole.Handicap)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.NewHole.Handicap)
            @Html.ValidationMessageFor(model => model.NewHole.Handicap)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.NewHoleDetails.Par)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.NewHoleDetails.Par)
            @Html.ValidationMessageFor(model => model.NewHoleDetails.Par)
        </div>

        <p>
            @if (Model.NewHole.HoleNumber < 1)
            {
                <input type="submit" value="Add" />
            }
            else
            {
                <input type="submit" value="Save" />
                <input type="reset" class="CancelEditButton" value="Cancel" id="cancel-@Model.NewHole.CourseID" />
            }
        </p>
    </fieldset>
}
        </td>
    </tr>
</table>

<fieldset>
    <legend>Front 9</legend>
    <table>
        <tr>
            <td>Hole</td>
@foreach (var item in Model.FrontHoles)
{
            <td align="center">
                @item.HoleNumber
            </td>
}
        </tr>
@foreach (var item in Model.FrontHoleDetails)
{
        <tr id="row-FrontTeeBox-@item.TeeBox.TeeBoxID" style="background-color:@item.TeeBox.TeeBoxName@if (String.Compare(item.TeeBox.TeeBoxName, "White", true) != 0)
                                              {@Html.Raw(";color:White")}" > 
            <td style="white-space:nowrap;">
                @item.TeeBox.TeeBoxName (@item.TeeBox.Rating/@item.TeeBox.Slope)
                <div class="buttonlist">
                    <a href="#" title="Edit Teebox" class="EditTeeBoxButton ui-state-default ui-corner-all ui-icon ui-icon-pencil" id="edit-@item.TeeBox.TeeBoxID"></a>
                    <a href="#" title="Delete Teebox" class="DeleteTeeBoxButton ui-state-default ui-corner-all ui-icon ui-icon-trash" id="delete-@item.TeeBox.TeeBoxID"></a>
                </div>
            </td>
@foreach (var holeInfo in item.HoleDetail)
{
            <td align="center">
                @holeInfo.Yardage
            </td>
}
        </tr>
        <tr id="row-FrontPar-@item.TeeBox.TeeBoxID" @if (String.Compare(item.TeeBox.TeeBoxName, "White", true) != 0)
                                              {@Html.Raw("style=\"color:" + @item.TeeBox.TeeBoxName + "\"")} >
            <td>
                Par
            </td>
@foreach (var holeInfo in item.HoleDetail)
{
            <td align="center">
                <b>@holeInfo.Par</b>
            </td>
}
        </tr>
}
        <tr>
            <td>Handicap</td>
@foreach (var item in Model.FrontHoles)
{
            <td align="center">
                @item.Handicap
            </td>
}
        </tr>
        <tr>
            <td></td>
@foreach (var item in Model.FrontHoles)
{
            <td align="center">
                <div class="buttonlist">
                    <a href="#" title="Edit" class="EditHoleButton ui-state-default ui-corner-all ui-icon ui-icon-pencil" id="edit-@item.HoleID"></a> 
                    <a href="#" title="Delete" class="DeleteHoleButton ui-state-default ui-corner-all ui-icon ui-icon-trash" id="delete-@item.HoleID"></a>
                </div>
            </td>
}
        </tr>
    </table>
</fieldset>

<fieldset>
    <legend>Back 9</legend>
    <table>
        <tr>
            <td>Hole</td>
@foreach (var item in Model.BackHoles)
{
            <td align="center">
                @item.HoleNumber
            </td>
}
        </tr>
@foreach (var item in Model.BackHoleDetails)
{
        <tr id="row-BackTeeBox-@item.TeeBox.TeeBoxID" style="background-color:@item.TeeBox.TeeBoxName@if (String.Compare(item.TeeBox.TeeBoxName, "White", true) != 0)
                                              {@Html.Raw(";color:White")}" >
            <td style="white-space:nowrap;">
                @item.TeeBox.TeeBoxName (@item.TeeBox.Rating/@item.TeeBox.Slope)
                <div class="buttonlist">
                    <a href="#" title="Edit Teebox" class="EditTeeBoxButton ui-state-default ui-corner-all ui-icon ui-icon-pencil" id="edit-@item.TeeBox.TeeBoxID"></a>
                    <a href="#" title="Delete Teebox" class="DeleteTeeBoxButton ui-state-default ui-corner-all ui-icon ui-icon-trash" id="delete-@item.TeeBox.TeeBoxID"></a>
                </div>
            </td>
@foreach (var holeInfo in item.HoleDetail)
{
            <td align="center">
                @holeInfo.Yardage
            </td>
}
        </tr>
        <tr id="row-BackPar-@item.TeeBox.TeeBoxID" @if (String.Compare(item.TeeBox.TeeBoxName, "White", true) != 0)
                                              {@Html.Raw("style=\"color:" + @item.TeeBox.TeeBoxName + "\"")} >
            <td>
                Par
            </td>
@foreach (var holeInfo in item.HoleDetail)
{
            <td align="center">
                <b>@holeInfo.Par</b>
            </td>
}
        </tr>
}
        <tr>
            <td>Handicap</td>
@foreach (var item in Model.BackHoles)
{
            <td align="center">
                @item.Handicap
            </td>
}
        </tr>
        <tr>
            <td></td>
@foreach (var item in Model.BackHoles)
{
            <td align="center">
                <div id="buttonlist">
                    <a href="#" title="Edit" class="EditHoleButton ui-state-default ui-corner-all ui-icon ui-icon-pencil" id="edit-@item.HoleID"></a> 
                    <a href="#" title="Delete" class="DeleteHoleButton ui-state-default ui-corner-all ui-icon ui-icon-trash" id="delete-@item.HoleID"></a>
                </div>
            </td>
}
        </tr>
    </table>
</fieldset>